<template>
  <div class="content">
    <el-card shadow="never" class="avatar">
      <el-avatar
        size="large"
        v-if="imageUrl"
        :src="imageUrl"
        style="cursor: pointer"
        @click="updateAvatar"
      />
      <span class="name">{{ username }}</span>
    </el-card>

    <el-card shadow="never" class="info">
      <div class="base">
        <el-form hide-required-asteriskclass="demo-ruleForm">
          <el-form-item label="用户">
            <span>{{ this.userInfo.username }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ this.userInfo.email }}</span>
          </el-form-item>
          <el-form-item label="注册时间">
            <span>{{ this.userInfo.created }}</span>
          </el-form-item>
          <el-form-item v-if="this.userInfo.lastLogin" label="上次登录">
            <span>{{ this.userInfo.lastLogin }}</span>
          </el-form-item>
        </el-form>
        <el-button @click="openUpdateVisible">编辑</el-button>
      </div>
    </el-card>

    <el-card shadow="never" class="info">
      <div class="base">
        <el-form hide-required-asteriskclass="demo-ruleForm">
          <el-form-item label="密码">
            <span>******</span>
          </el-form-item>
        </el-form>
        <el-button @click="openUpdatePassword">修改密码</el-button>
      </div>
    </el-card>

    <el-dialog
      v-model="updateAatarVisible"
      title="更换头像"
      style="width: 500px; height: 400px"
    >
      <div class="dialog">
        <el-image
          style="width: 200px; height: 200px"
          :src="updateImageUrl"
          fit="cover"
        />
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button>选择文件</el-button>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancleAvatar">取消</el-button>
          <el-button type="primary" @click="confirmAvatar">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="updateVisible"
      title="修改用户基本信息"
      style="width: 500px; height: 400px"
    >
      <el-form :model="updateForm">
        <el-form-item label="用户">
          <el-input v-model="this.updateForm.username" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="this.updateForm.email" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancleUpdate">取消</el-button>
          <el-button type="primary" @click="confirmUpdate">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="passwordVisible"
      title="修改密码"
      style="width: 500px; height: 400px"
    >
      <el-form :model="passwordForm">
        <el-form-item label="原密码">
          <el-input v-model="this.passwordForm.oPassword" type="password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="this.passwordForm.nPassword" type="password" />
        </el-form-item>
        <el-form-item label="再次确认">
          <el-input v-model="this.passwordForm.cPassword" type="password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="canclePassword">取消</el-button>
          <el-button type="primary" @click="confirmPassword">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import { updateAvatar, updateInfo, updatePassword } from "@/api/user";
export default {
  name: "User",
  data() {
    return {
      userInfo: {},
      username: "",
      imageUrl:
        "https://zzzzzzzzzzzzzzzzzzzzzzzzz.oss-cn-hangzhou.aliyuncs.com/QQ%E5%9B%BE%E7%89%8720220913164733.jpg",
      updateAatarVisible: false,
      updateImageUrl: "",
      file: {},
      updateForm: {
        id: "",
        username: "",
        email: "",
      },
      updateVisible: false,
      passwordVisible: false,
      passwordForm: {
        oPassword: "",
        nPassword: "",
        cPassword: "",
      },
    };
  },
  created() {
    const userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = userInfo;
    this.imageUrl = userInfo["avatar"];
    this.updateImageUrl = userInfo["avatar"];
    this.username = userInfo["username"];
    this.updateForm.id = userInfo.id;
    this.updateForm.username = userInfo.username;
    this.updateForm.email = userInfo.email;
  },
  computed: {
    updateInfo() {
      return this.$store.getters.getUserInfo;
    },
  },
  watch: {
    updateInfo: {
      handler(newVal) {
        this.userInfo = newVal;
      },
    },
  },
  methods: {
    handleAvatarSuccess(response, file) {
      console.log(response);
      console.log(file);
    },
    beforeAvatarUpload(rawFile) {
      let url = URL.createObjectURL(rawFile);
      this.updateImageUrl = url;
      console.log(url);
      if (rawFile.type !== "image/jpeg") {
        ElMessage.error("Avatar picture must be JPG format!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("Avatar picture size can not exceed 2MB!");
        return false;
      }
      this.file = rawFile;
      return false;
    },
    updateAvatar() {
      this.updateAatarVisible = true;
    },
    cancleAvatar() {
      this.updateAatarVisible = false;
    },
    confirmAvatar() {
      let formData = new FormData();
      formData.append("avatar", this.file);
      updateAvatar(this.userInfo.id, formData).then((res) => {
        if (res.code == 200) {
          ElMessage.success("修改头像成功");
          this.updateImageUrl = res.data;
          this.imageUrl = res.data;
          let userInfo = this.userInfo;
          userInfo.avatar = res.data;
          sessionStorage.removeItem("userInfo");
          sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.updateAatarVisible = false;
          this.$store.commit("SET_UPDATEAVATARURL", res.data);
          this.$store.commit("SET_USERINFO", userInfo);
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    openUpdateVisible() {
      this.updateVisible = true;
    },
    cancleUpdate() {
      this.updateVisible = false;
      this.updateForm.username = "";
      this.updateForm.email = "";
    },
    confirmUpdate() {
      updateInfo(this.updateForm).then((res) => {
        if (res.code == 200) {
          ElMessage.success("修改基本信息成功");
          this.username = this.updateForm.username;
          sessionStorage.removeItem("userInfo");
          let userInfo = this.userInfo;
          userInfo.username = this.updateForm.username;
          userInfo.email = this.updateForm.email;
          sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.commit("SET_USERINFO", userInfo);
          this.updateVisible = false;
        } else {
          ElMessage.error(res.msg);
        }
      });
    },
    openUpdatePassword() {
      this.passwordVisible = true;
    },
    canclePassword() {
      this.passwordVisible = false;
      this.passwordForm.oPassword = "";
      this.passwordForm.nPassword = "";
      this.passwordForm.cPassword = "";
    },
    confirmPassword() {
      if (this.passwordForm.nPassword == this.passwordForm.cPassword) {
        let data = {
          id: this.userInfo.id,
          opassword: this.passwordForm.oPassword,
          password: this.passwordForm.nPassword,
        };
        updatePassword(data).then((res) => {
          if (res.code == 200) {
            ElMessage.success("修改密码成功");
            this.passwordVisible = false;
            this.passwordForm.oPassword = "";
            this.passwordForm.nPassword = "";
            this.passwordForm.cPassword = "";
          } else {
            ElMessage.error(res.msg);
          }
        });
      } else {
        ElMessage.error("新密码与确认密码不一致");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .avatar {
    margin: 10px 100px;
    background: #f9f9f9fa;
    text-align: left;
    .name {
      display: inline-block;
      font-size: 25px;
      font-weight: bold;
      position: relative;
      position: relative;
      left: 15px;
      top: -20px;
    }
  }
  .dialog {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-around;
    align-items: center;
  }

  .info {
    margin: 10px 100px;
    background: #f9f9f9fa;
    text-align: left;
    .base {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
</style>
